<template>
  <div class="content-box-full">
    <ContainerBox>
      <template #header>
        <el-form
          @keyup.enter.native="handleSearch"
          ref="formRef"
          :model="searchForm"
          label-width="auto"
          inline
        >
          <el-form-item label="设备编号:" prop="consumptionPeriodNo">
            <el-input v-model="searchForm.equipmentNo" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="设备名称:" prop="consumptionPeriodName">
            <el-input v-model.number="searchForm.equipmentName" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button v-prevent-reclick type="primary" @click="handleSearch">查询</el-button>
            <!--            <el-button @click="handleAdd" v-prevent-reclick>新增</el-button>-->
          </el-form-item>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="tableData"
          :empty-text="isLoadingTable ? '加载中...' : '暂无数据'"
          class="table-box"
          height="100%"
          stripe
          fit
          border
          highlight-current-row
        >
          <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
          <el-table-column label="设备编号" align="center" min-width="100" prop="equipmentNo">
          </el-table-column>
          <el-table-column label="设备名称" align="center" min-width="100" prop="equipmentName">
          </el-table-column>
          <el-table-column label="IP地址" align="center" min-width="100" prop="equipmentIp">
          </el-table-column>
          <el-table-column label="网络状态" align="center" min-width="100" prop="networkStatus">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" min-width="120">
            <template #default="{ row }">
              <el-button @click="gatherData(row)">采集</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <CommonPaging
          :total="tableTotal"
          :current-page="pageNum"
          @currentChange="handleCurrentChange"
          @sizeChange="handleSizeChange"
        ></CommonPaging>
      </template>
    </ContainerBox>
    <el-dialog
      lock-scroll
      top="10vh"
      class="common-el-dialog"
      v-model="showDialog"
      title="采集数据"
      width="800"
      @close="handleClose"
    >
      <el-table
        :data="collectTableData"
        :empty-text="isCollectLoading ? '查询中...' : '暂无数据'"
        class="table-box"
        height="100%"
        stripe
        fit
        border
        highlight-current-row
      >
        <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
        <el-table-column label="设备编号" align="center" min-width="100" prop="equipmentNo">
        </el-table-column>
        <el-table-column label="设备名称" align="center" min-width="100" prop="equipmentName">
        </el-table-column>
        <el-table-column label="IP地址" align="center" min-width="100" prop="equipmentIp">
        </el-table-column>
        <el-table-column label="网络状态" align="center" min-width="100" prop="networkStatus">
        </el-table-column>
        <el-table-column label="数据条目" align="center" min-width="100" prop="dataTotal">
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" v-prevent-reclick @click="handleGather"> 查询</el-button>
          <el-button type="warning" v-prevent-reclick @click="handleConfirm"> 采集</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import ContainerBox from '@/components/base/ContainerBox.vue'
import { ref, onMounted, computed } from 'vue'
import CommonPaging from '@/components/base/CommonPaging.vue'
import consumptionLevelApi from '@/api/consumptionLevelApi.js'
import message from '@/utils/elMessage.js'

onMounted(() => {
  fetchList()
})
const searchForm = ref({
  equipmentNo: '', //设备编号
  equipmentName: '', //设备名称
})
const pageNum = ref(1)
const pageSize = ref(10)

//查询
function handleSearch() {
  handleCurrentChange(1)
}

function fetchList() {
  isLoadingTable.value = true
  tableData.value = []
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    equipmentNo: searchForm.value.equipmentNo,
    name: searchForm.value.equipmentName,
  }
  consumptionLevelApi
    .fetchList(params)
    .then((res) => {
      if (res.code === 0) {
        const data = res.page || {}
        tableTotal.value = data.totalCount || 0
        tableData.value = data.list || []
      } else {
        message.warning(res.msg)
      }
    })
    .finally(() => {
      isLoadingTable.value = false
    })
}

// 列表数据
const isLoadingTable = ref(false)
const tableData = ref([])
const tableTotal = ref(0)

//采集数据
function gatherData() {
  showDialog.value = true
}

// function editRow(row) {
//   consumptionLevelApi.check(row.id).then((res) => {
//     if (res.code === 0) {
//       const {id, equipmentNo, name, dayNumber, dayAmount, eveyNumber, everAmount} =
//       res.consumptionLevel || {}
//       dataForm.value.id = id
//       dataForm.value.equipmentNo = equipmentNo
//       dataForm.value.equipmentName = name
//       dataForm.value.maxNumberDay = dayNumber
//       dataForm.value.maxPriceDay = dayAmount
//       dataForm.value.maxNumberMeal = eveyNumber
//       dataForm.value.maxPriceMeal = everAmount
//       dialogType.value = 'edit'
//       showDialog.value = true
//     } else {
//       message.warning(res.msg)
//     }
//   })
// }

// function deleteRow(row) {
//   if (row.id) {
//     message.confirm('您是否确定要删除该消费等级?', '提示').then(() => {
//       consumptionLevelApi
//         .delete([row.id])
//         .then((res) => {
//           if (res.code === 0) {
//             message.success(res.msg)
//             fetchList()
//           } else {
//             message.warning(res.msg)
//           }
//         })
//         .catch((error) => {
//           console.error(error.messages)
//         })
//     })
//   }
// }

function handleCurrentChange(val) {
  pageNum.value = val
  fetchList()
}

function handleSizeChange(val) {
  pageNum.value = 1
  pageSize.value = val
  fetchList()
}

// 采集相关
const showDialog = ref(false)
const collectTableData = ref([])
const isCollectLoading = ref(false)

function handleClose() {
  collectTableData.value = []
}

function handleGather() {}

function handleConfirm() {}
</script>

<style scoped lang="scss"></style>
